<template>
  <div class="app-container">
    <el-button
      type="success"
      icon="el-icon-plus"
      @click="dialogFormVisible = true"
      >添加模板</el-button
    >

    <el-table :data="tmpList" style="width: 100%">

      
      <el-table-column prop="name" label="模板名称"> </el-table-column>
      <el-table-column prop="brands" label="品牌"> 

          <template slot-scope="scope">
              <div>
                  <p>{{scope.row.brands|jsonFormart}}</p>
              </div>
          </template>

      </el-table-column>
       <el-table-column prop="spec" label="规格"> 

           <template slot-scope="scope">
              <div>
                  <p>{{scope.row.spec|jsonFormart}}</p>
              </div>
          </template>

       </el-table-column>
        <el-table-column  label="操作"> 
        <template slot-scope="scope" >
            <div>
                <el-button @click="updateTpl(scope.row)" type="primary" size="mini" icon="el-icon-edit">修改</el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
            </div>
        </template>
    </el-table-column>
    </el-table>

 <br/>
     <br/>
    <el-pagination
        style="float:right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchMap.pageNum"
        :page-sizes="[5, 10, 25, 50]"
        :page-size="searchMap.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>


    <!-- 添加模板 -->
  <el-dialog
    title="模板编辑"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
  >
    <el-form>
      <el-form-item label="模板名称" label-width="100px">
        <el-input v-model="entity.name"></el-input>
      </el-form-item>
      <el-form-item label="关联品牌" label-width="100px">
          <el-select v-model="entity.brands1" multiple placeholder="请选择品牌">
            <el-option
            v-for="item in brands"
            :key="item.id"
            :label="item.name"
            :value="item.id">
            </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关联规格" label-width="100px">
          <el-select v-model="entity.spec1" multiple placeholder="请选择规格">
            <el-option
            v-for="item in specs"
            :key="item.id"
            :label="item.specName"
            :value="item.id">
            </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveTmp()">确 定</el-button>
    </div>
  </el-dialog>
  </div>

  
</template>


<script>
import {searchTpl,saveTpl,updateTpl } from '@/api/template'
import {findBrandAll} from '@/api/brand'
import {findSpecAll} from '@/api/spec'
export default {
  data() {
    return {
      dialogFormVisible: false,
      entity:{
        brands1: [],
        brands:"",
        name: "",
        spec1: [],
        spec:","
      },
      brands:[], //品牌列表
      specs:[],//规格列表
      searchMap:{
            pageNum: 1,
            pageSize: 5,
            where: {
                name: "",
            }
      },
      tmpList:[],
      total:0,

    };
  },
  methods: {
      search(){
          searchTpl(this.searchMap).then(res=>{
              this.tmpList = res.data;

              this.total = res.totalSize;

          })
      },
       handleSizeChange(size){
          this.searchMap.pageSize = size;
          this.search();
      },
      handleCurrentChange(page){
          this.searchMap.pageNum = page;
          this.search()
      },
      saveTmp(){
          //品牌处理
          var brandsArr = [];
          this.brands.forEach(item=>{
              if(this.entity.brands1.indexOf(item.id) != -1){
                  brandsArr.push({id:item.id,name:item.name})
              }
          })
          console.log(brandsArr);

          this.entity.brands = JSON.stringify(brandsArr)


          //规格处理
          var specArr = [];
          this.specs.forEach(item=>{
              if(this.entity.spec1.indexOf(item.id) != -1){
                  specArr.push({id:item.id,name:item.specName})
              }
          })

          console.log(specArr);

          this.entity.spec = JSON.stringify(specArr)


         console.log(this.entity);

         if(this.entity.id){ //修改
                updateTpl(this.entity).then(res=>{
                    this.$notify({
                        title:res.success?'成功':'失败',
                        message:res.msg,
                        type:res.success?'success':'error',
                    })
                    this.dialogFormVisible = false;  
                    this.search();
                })
         }else{
                 saveTpl(this.entity).then(res=>{
                    this.$notify({
                        title:res.success?'成功':'失败',
                        message:res.msg,
                        type:res.success?'success':'error',
                    })
                    this.dialogFormVisible = false;  
                    this.search();
                })
         }


      },
      updateTpl(row){
          this.dialogFormVisible = true;

          //品牌列表渲染
          var brandArr = JSON.parse(row.brands);
          var brandsIdArr = [];
          brandArr.forEach(item=>{
            
            brandsIdArr.push(item.id);
          })

         this.entity.brands1 = brandsIdArr;
          //规格列表渲染
          var specArr = JSON.parse(row.spec);
          var specIdArr = [];
          specArr.forEach(item=>{
            specIdArr.push(item.id);
          })

        this.entity.spec1 = specIdArr;

        this.entity.name = row.name;
        this.entity.id = row.id;
         
         
      }
  },

  created(){
      this.search();

      //获取所有的品牌列表
      findBrandAll().then(res=>{
          this.brands = res.data
      })


      //获取所有的规格列表
     findSpecAll().then(res=>{
         this.specs = res.data
     })
  }
};
</script>